<script lang="ts" setup>
import { ref, computed } from "vue";
// 导入消息工具
import message from "@/utils/message.js";
// 导入图标工具
import { View, Calendar, ChatDotRound } from "@/utils/icons.js";
import { useRouter } from "vue-router";

const router = useRouter();

// 简历状态选项
const statusOptions = [
    { label: "全部", value: "all" },
    { label: "待处理", value: "pending" },
    { label: "已查看", value: "viewed" },
    { label: "已约面", value: "interview" },
    { label: "不合适", value: "rejected" },
];

// 职位选项
const jobOptions = ref([
    { label: "全部职位", value: "all" },
    { label: "前端工程师", value: "frontend" },
    { label: "UI设计师", value: "ui" },
    { label: "Java开发", value: "java" },
]);

// 时间范围
const dateRange = ref([]);

// 模拟简历数据
const resumes = ref([
    {
        id: 1,
        name: "张三",
        job: "前端工程师",
        status: "pending",
        time: "2025-05-12",
        phone: "13800138001",
        email: "zhangsan@example.com",
        education: "本科",
        experience: "3年",
    },
    {
        id: 2,
        name: "李四",
        job: "UI设计师",
        status: "viewed",
        time: "2025-05-11",
        phone: "13900139001",
        email: "lisi@example.com",
        education: "大专",
        experience: "2年",
    },
    {
        id: 3,
        name: "王五",
        job: "Java开发",
        status: "interview",
        time: "2025-05-10",
        phone: "13700137001",
        email: "wangwu@example.com",
        education: "硕士",
        experience: "5年",
    },
]);

// 搜索关键词
const searchKeyword = ref("");

// 高级搜索选项
const advancedSearch = ref({
    education: "",
    experience: "",
    skills: "",
});

// 是否显示高级搜索
const showAdvanced = ref(false);

// 筛选条件
const filterStatus = ref("all");
const filterJob = ref("all");

// 选中的简历ID列表
const selectedResumeIds = ref<number[]>([]);

// 批量操作状态
const batchStatus = ref("");

// 筛选后的简历列表
const filteredResumes = computed(() => {
    return resumes.value.filter((r) => {
        const statusMatch = filterStatus.value === "all" || r.status === filterStatus.value;
        const jobMatch = filterJob.value === "all" || r.job === filterJob.value;

        // 修复日期比较
        let dateMatch = true;
        if (dateRange.value && dateRange.value.length === 2) {
            const startDate = dateRange.value[0] ? new Date(dateRange.value[0]).getTime() : 0;
            const endDate = dateRange.value[1] ? new Date(dateRange.value[1]).getTime() : Infinity;
            const resumeDate = new Date(r.time).getTime();
            dateMatch = resumeDate >= startDate && resumeDate <= endDate;
        }

        const keywordMatch =
            searchKeyword.value === "" || r.name.includes(searchKeyword.value) || r.job.includes(searchKeyword.value);
        const advancedMatch =
            (advancedSearch.value.education === "" || r.education === advancedSearch.value.education) &&
            (advancedSearch.value.experience === "" || r.experience === advancedSearch.value.experience);

        return statusMatch && jobMatch && dateMatch && keywordMatch && advancedMatch;
    });
});

const viewDetail = (id: number) => {
    router.push({
        path: `/company/resume/${id}`,
    });
};

const arrangeInterview = (id: number) => {
    console.log("安排面试:", id);
};

const sendMessage = (id: number) => {
    console.log("发送消息:", id);
};

// 批量更新简历状态
const batchUpdateStatus = () => {
    if (!batchStatus.value || selectedResumeIds.value.length === 0) return;

    resumes.value = resumes.value.map((r) => {
        if (selectedResumeIds.value.includes(r.id)) {
            return { ...r, status: batchStatus.value };
        }
        return r;
    });
    selectedResumeIds.value = [];
    batchStatus.value = "";
};

// 导出选中简历
const exportResumes = () => {
    if (selectedResumeIds.value.length === 0) {
        message.warning("请先选择要导出的简历");
        return;
    }

    const selectedResumes = resumes.value.filter((r) => selectedResumeIds.value.includes(r.id));

    // 生成CSV内容
    const headers = "姓名,应聘职位,状态,学历,工作经验,电话,邮箱,投递时间\n";
    const csvContent = selectedResumes
        .map(
            (r) =>
                `"${r.name}","${r.job}","${r.status}","${r.education}","${r.experience}","${r.phone}","${r.email}","${r.time}"`
        )
        .join("\n");

    // 创建下载链接
    const blob = new Blob([headers + csvContent], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = `简历导出_${new Date().toLocaleDateString()}.csv`;
    link.click();
    URL.revokeObjectURL(link.href);

    message.success("导出成功");
};
</script>

<template>
    <div class="resume-container">
        <div class="header">
            <h2>收到的简历</h2>
            <div class="search-bar">
                <el-input
                    v-model="searchKeyword"
                    placeholder="请输入姓名或职位关键词"
                    clearable
                    style="width: 300px; margin-right: 10px"
                />
                <el-button @click="showAdvanced = !showAdvanced"> {{ showAdvanced ? "隐藏" : "高级" }}搜索 </el-button>
                <el-collapse-transition>
                    <div v-show="showAdvanced" class="advanced-search">
                        <el-form :model="advancedSearch" label-width="80px">
                            <el-form-item label="学历要求">
                                <el-select v-model="advancedSearch.education" clearable>
                                    <el-option label="不限" value="" />
                                    <el-option label="大专" value="大专" />
                                    <el-option label="本科" value="本科" />
                                    <el-option label="硕士" value="硕士" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="工作经验">
                                <el-select v-model="advancedSearch.experience" clearable>
                                    <el-option label="不限" value="" />
                                    <el-option label="1-3年" value="1-3年" />
                                    <el-option label="3-5年" value="3-5年" />
                                    <el-option label="5年以上" value="5年以上" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-collapse-transition>
            </div>
            <div class="filter-bar">
                <div class="filter-item">
                    <span>状态：</span>
                    <el-select v-model="filterStatus" style="width: 120px">
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="filter-item">
                    <span>职位：</span>
                    <el-select v-model="filterJob" style="width: 120px">
                        <el-option
                            v-for="item in jobOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="filter-item">
                    <span>时间：</span>
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 240px"
                    />
                </div>
            </div>
        </div>

        <div class="batch-actions" v-if="selectedResumeIds.length > 0">
            <el-select v-model="batchStatus" placeholder="批量操作" style="width: 120px; margin-right: 10px">
                <el-option label="标记为已查看" value="viewed" />
                <el-option label="标记为已约面" value="interview" />
                <el-option label="标记为不合适" value="rejected" />
            </el-select>
            <el-button type="primary" @click="batchUpdateStatus">应用</el-button>
            <el-button @click="exportResumes">导出选中</el-button>
            <el-button @click="selectedResumeIds = []">取消选择</el-button>
        </div>

        <el-table
            :data="filteredResumes"
            style="width: 100%"
            @selection-change="(selection) => (selectedResumeIds = selection.map((item) => item.id))"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="job" label="应聘职位" width="150" />
            <el-table-column prop="status" label="状态" width="120">
                <template #default="{ row }">
                    <el-tag :type="row.status === 'pending' ? 'warning' : row.status === 'viewed' ? 'info' : 'success'">
                        {{ row.status === "pending" ? "待处理" : row.status === "viewed" ? "已查看" : "已约面" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="投递时间" width="120" />
            <el-table-column label="操作" width="220">
                <template #default="{ row }">
                    <el-button size="small" :icon="View" @click="viewDetail(row.id)"> 详情 </el-button>
                    <el-button size="small" :icon="Calendar" type="primary" @click="arrangeInterview(row.id)">
                        约面
                    </el-button>
                    <el-button size="small" :icon="ChatDotRound" @click="sendMessage(row.id)"> 沟通 </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.resume-container {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.search-bar {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.advanced-search {
    margin-top: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 4px;
}

.filter-bar {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.batch-actions {
    margin-bottom: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.el-table {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.el-button {
    margin-left: 10px;
}
</style>
